function make(tag, content, attrs) {
    let attrs_ = ''

    for (const key in attrs) {
        attrs_ += `${key}="${attrs[key]}" `
    }
    return `<${tag} ${attrs_}>${content}</${tag}>`
}

function Node(title, level, parent) {
    this.title = title
    this.level = level
    this.parent = parent
    this.children = []
}

Node.prototype.fullPath = function () {
    let fullPath_ = ''
    let node = this
    while (node.title != 'ROOT') {
        fullPath_ = node.title + ' ' + fullPath_
        node = node.parent
    }
    return fullPath_
}

const nodes = eval($('#nodes').attr('data'))
const ancestors = $('#ancestors_data').attr('data')
const ancestors_prefix = ancestors
    .substring(1, ancestors.length - 1)
    .replaceAll(',', '')
    .split(' ')
    .slice(0, -1)
    .join(' ')
const fontSize = 24
let aTags = ''

let lastLevel = -1
let root = new Node('ROOT', -1, null)
root.x = 0
root.y = 0
root.width = 0
root.height = 0
root.indent = 0
root.parent = {}
root.parent.x = 0
root.parent.y = 0
root.parent.width = 0
root.parent.indent = 0
root.parent.width = 0

let parents = [root]
let parent = null

for (let idx = 0; idx < nodes.length; idx++) {
    const node_ = nodes[idx]

    const title = node_.title
    const level = node_.level

    if (level > lastLevel) {
        parent = parents[parents.length - 1]
    } else {
        for (let i = 0; i < lastLevel - level + 1; i++) {
            parents.pop()
        }
        parent = parents[parents.length - 1]
    }

    const node = new Node(title, level, parent)
    parent.children.push(node)
    parents.push(node)
    lastLevel = level

    const href = '?q=' + title

    $('#calculateWidth').append($(make('span', node.title, {'class': 'hidden'})))
    const width = $(`.hidden:last-child`).width()
    const height = fontSize * 2

    const x = parent.x + parent.width + fontSize * 4
    const y = (idx + 1) * height
    const style = "fill:white"
    const textTag = make('text', node_.title, {
        x,
        y,
        width,
        height,
        style,
        "class": "node",
        "fullpath": (ancestors_prefix + ' ' + node.fullPath()).trim()
    })

    // const aTag = make('span', textTag, {href: href,"class":"node"})
    const aTag = textTag

    node.x = x
    node.y = y
    node.width = width
    node.height = height

    const ax = parent.x + parent.width
    const ay = parent.y
    const bx = node.x
    const by = node.y
    if (node.parent.title !== 'ROOT') {
        aTags += make('path', '', {
            d: `M ${ax} ${ay} L ${ax} ${by - 10} Q ${ax} ${by} ${bx - 10} ${by} L ${bx} ${by}`,
            stroke: 'white',
            fill: 'none',
        })
    }
    aTags += aTag
}


svg = `<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    ${aTags}
</svg>`

$('#descendants').append($(svg))

// const svgWidth = window.innerWidth - $('#sibling').outerWidth() - 20
const svgWidth = 10000
const svgHeight = 10000
$('svg').css('width', svgWidth).css('height', svgHeight)

$('.node').click(function (e) {
    const fullPath = $(e.target).attr('fullpath')
    location.href = '?q=' + fullPath+'+-f'
})